<template>
  <el-steps :active="active" align-center finish-status="success">
    <el-step v-for="(item, index) in steps" :key="index" :title="item" />
  </el-steps>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0
    },
    steps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.el-step{
  ::v-deep .el-step__title.is-process,
  ::v-deep .el-step__head.is-process{
    color: #165DFF;
  }
  ::v-deep .el-step__title.is-success,
  ::v-deep .el-step__head.is-success{
    color: #165DFF;
    border-color: #165DFF;
  }
  ::v-deep .el-step__head.is-process{
    border-color: #165DFF;
  }
  ::v-deep .el-step__head.is-success{
    .el-step__line{
      background-color: #165DFF;
    }
  }
}
</style>
